import ShowDetail from '@/components/ShowDetail/ShowDetail';
import UserInfo from '@/components/UserInfo/UserInfo';
import {
    getCrossborderListDetail,
    getExposureListDetail,
    getGoodsDetail,
    getLibraryDetail,
    getLifeadListDetail,
    getNewsListDetail,
    getProfessionalListDetail,
    getTransportDetailDetail,
} from '@/servers/api/collection';
import { useLocation } from '@umijs/max';
import { Spin } from 'antd';
import { useEffect, useRef, useState } from 'react';
interface ParamsUrl {
    type: number;
    id: number;
    releaseType: string;
}
const Detail: React.FC = (props) => {
    const location = useLocation();
    console.log('location详情:',location);
    const releaseType = useRef('');
    const [detailData, setdetailData] = useState<any>({});
    const type = useRef(1);
    const [loading, setloading] = useState<boolean>(false);
    function getDetail(id: number) {
        switch (releaseType.current) {
            case 'goods':
                getGoodsDetail({ id }).then((res) => {
                    setdetailData(res.data);
                    setloading(false);
                });
                break;
            case 'transport':
                getTransportDetailDetail({ id }).then((res) => {
                    setdetailData(res.data);
                    setloading(false);
                });
                break;
            case 'crossborder':
                getCrossborderListDetail({ id }).then((res) => {
                    // 处理运输方式，mode
                    if (res.mode) {
                        res.mode = res.mode.split(',');
                    }
                    setdetailData(res.data);
                    setloading(false);
                });
                break;
            case 'professional':
                getProfessionalListDetail({ id }).then((res) => {
                    setdetailData(res.data);
                    setloading(false);
                });
                break;
            case 'resource':
                getLibraryDetail({ id }).then((res) => {
                    setdetailData(res.data);
                    setloading(false);
                });
                break;
            case 'lifead':
                getLifeadListDetail({ id }).then((res) => {
                    setdetailData(res.data);
                    setloading(false);
                });
                break;
            case 'news':
                getNewsListDetail({ id }).then((res) => {
                    setdetailData(res.data);
                    setloading(false);
                });
                break;
            case 'exposure':
                getExposureListDetail({ id }).then((res) => {
                    setdetailData(res.data);
                    setloading(false);
                });
                break;
        }
    }
    useEffect(() => {
        const state = location.state as ParamsUrl;
        releaseType.current = state.releaseType;
        type.current = state.type;
        getDetail(state.id);
    }, [location.state]);
    return (
        <>
            <Spin spinning={loading}>
                {releaseType.current !== 'resource' && (
                    <UserInfo info={detailData?.user}></UserInfo>
                )}
                <ShowDetail
                    info={detailData}
                    type={type.current}
                    releaseType={releaseType.current}
                ></ShowDetail>
            </Spin>
        </>
    );
};

export default Detail;
